<template>
  <div>
    <el-row class="updataContainer">
      <!-- 角色信息表格 -->
      <el-col :span="22" :offset="1">
        <el-table :data="roleInfoArr" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-row>
                <el-form label-position="left" label-width="100px">
                  <el-col :sm="{span:7,offset:1}" :xs="{span:11,offset:1}">
                    <el-form-item label="角色名">
                      <span>{{ props.row.name }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :sm="{span:7,offset:1}" :xs="{span:11,offset:1}">
                    <el-form-item label="星级">
                      <span>{{ props.row.starLevel }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :sm="{span:7,offset:1}" :xs="{span:11,offset:1}">
                    <el-form-item label="所属元素">
                      <span>{{ props.row.element }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :sm="{span:7,offset:1}" :xs="{span:11,offset:1}">
                    <el-form-item label="所属区域">
                      <span>{{ props.row.region }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :sm="{span:7,offset:1}" :xs="{span:11,offset:1}">
                    <el-form-item label="使用武器">
                      <span>{{ props.row.weapon }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :sm="{span:7,offset:1}" :xs="{span:11,offset:1}">
                    <el-form-item label="头像访问链接">
                      <a :href="props.row.imageUrl" target="_blank">查看</a>
                    </el-form-item>
                  </el-col>        
                </el-form>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column label="角色名" prop="name"> </el-table-column>
          <el-table-column label="星级" prop="starLevel"> </el-table-column>
          <el-table-column label="所属元素" prop="element"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-row class="pagination">
      <el-col :span="8">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageSize"
          :current-page="pageNo"
          :total="total"
          @current-change="changeCurrenPage"
          >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  data() {
    return {
      pageNo:1,
      pageSize:7,
    };
  },
  computed:{
    ...mapState({
      roleInfoArr:(state)=>state.home.roleInfoArr,
      total:(state)=>state.home.total
    })
  },
  methods: {
    handleEdit(index, row) {
      this.$router.push({
          name:'updateRoleInfo',
          params:{
              roleInfo:row
          }
      })
    },
    getRoleInfoArr(){
      let paginationCondition = {}
      paginationCondition.pageSize = this.pageSize
      paginationCondition.pageNo = this.pageNo

      this.$store.dispatch("getRoleInfoForPagination",paginationCondition)
    },
    changeCurrenPage(currentPage){
      this.pageNo = currentPage
      this.getRoleInfoArr()
    }
  },
  mounted(){
    this.getRoleInfoArr()
  }

};
</script>

<style scoped lang="less">
@media screen and (max-width:450px) {
  .updataContainer .el-col{
    width: 100%;
  }
}
.updataContainer {
  height: 600px;
  overflow: scroll;
}
</style>